/**
 * Created by tanbingqin on 2018/11/7.
 */
import React from 'react'
import { connect } from 'react-redux';
import moment from 'moment'
import {messages, deepCopy, deepFullCopy, queryCurrencyPrecision} from 'share/common'
import {Input, Row, Col, Table, Popover, Affix, Button} from 'antd'
import SlideFrame from "components/slide-frame";
import ExpenseDetail from 'containers/request/new-request/expense-detail';

class ExpenseTypeFrame extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      field: {},
      showExpenseFlag: false,
      nowExpense: {},
      isHidePaymentType: false, //是否隐藏支付方式的显示
      columns: [
        {
          title: '',
          dataIndex: 'id',
          width: '5%',
          render: (value, record) => <img src={record.expenseType.iconURL} style={{width: 20, maxHeight: 20}}/>
        },
        {
          title: messages('components.key379'/*费用类型*/), dataIndex: 'expenseType', render: value =>
          <Popover content={value.name}>{value.name}</Popover>
        },
        {title: messages('components.key380'/*币种*/), dataIndex: 'currencyCode', width: '8%'},
        {title: messages('components.key381'/*金额*/), dataIndex: 'amount', align: 'right', render: (value, record)=>this.filterMoney(value, queryCurrencyPrecision(record.currencyCode))},
        {title: messages('components.key382'/*汇率*/), dataIndex: 'actualCurrencyRate',align: 'right', render: value => this.filterMoney(value || 1, 2)},
        {
          title: messages('components.key148'/*本币金额*/), dataIndex: 'baseAmount', align: 'right', render: (value, record) =>
          this.filterMoney((record.amount * (record.actualCurrencyRate || 1)).toFixed(2), queryCurrencyPrecision(props.info.currencyCode))
        },
        {
          title: messages('components.key383'/*支付方式*/), dataIndex: 'paymentType', render: value =>
          Number(value) === 1001 ? messages('components.key384'/*个人支付*/) : messages('components.key385'/*公司支付*/)
        },
        {
          title: messages('common.remark')/*备注*/, dataIndex: 'remark', width: '15%', render: value => {
            return value ? <Popover content={value}>{value}</Popover> : null
          }
        }
      ]
    }
  }

  componentWillMount() {
    const { field } = this.props;
    let {columns} = this.state;
    this.setState({field}, this.initPaymentType);
    if (false && this.props.info.formType === 2001) {
      let itineraryInfo = {
        title: messages('request.key559')/*行程*/,
        dataIndex: 'itineraryOID',
        width: '15%',
        render: (value, record) => {
          let itineraryStr = '';
          let summary = record.itinerarySummary ? JSON.parse(record.itinerarySummary) : null;
          if (record.itineraryType === 1001 || record.itineraryType === 1002) {
            itineraryStr = record.itineraryType === 1001 ? messages('request.key560')/*飞机*/ : messages('request.key410')/*火车*/;
            let fromCityStr = summary.fromCity ? summary.fromCity : messages('request.key490')/*不限*/;
            let toCityStr = summary.toCity ? summary.toCity : messages('request.key490')/*不限*/;
            itineraryStr = summary ? `${itineraryStr} | ${summary.startDate} | ${fromCityStr} - ${toCityStr}` : '-';
          }
          if (record.itineraryType === 1003) {
            itineraryStr = messages('request.key414')/*酒店*/;
            let cityStr = summary.city ? summary.city : messages('request.key490')/*不限*/;
            itineraryStr = summary ? `${itineraryStr} | ${summary.startDate} | ${cityStr}` : '-';
          }
          if (record.itineraryType === 1006) {
            let cityStr = summary.toCity ? summary.toCity : messages('request.key555')/*通用城市*/;
            itineraryStr = messages('request.key413')/*差补*/;
            itineraryStr = summary ? `${itineraryStr} | ${summary.startDate} ~ ${summary.endDate} | ${cityStr}` : '-';
          }
          return itineraryStr ? <Popover content={itineraryStr}>{itineraryStr}</Popover> : '--';
        }
      };
      columns.splice(2, 0, itineraryInfo);
      this.setState({columns});
    }
  };

  initPaymentType = () => {
    const { field, columns } = this.state;
    if (field.fieldContent && JSON.parse(field.fieldContent).hideCompanyPay) {
      this.setState({isHidePaymentType: true});
      let spliceIndex = -1;
      columns.map((column, index) => {
        if (column.dataIndex === 'paymentType') {
          spliceIndex = index;
        }
      });
      if (spliceIndex > -1) {
        columns.splice(spliceIndex, 1);
        this.setState({columns});
      }
    }
  };

  goDetailExpense = (record) => {
    this.setState({showExpenseFlag: true, nowExpense: record});
  };

  expandedRowRender = (record) => {
    let expandedFlag = false;
    if (record.budgetLabelCode === 'BUD_002' || record.budgetLabelCode === 'BUD_003') {
      expandedFlag = true
    }
    return expandedFlag ? (
      <div className="expanded-row">
        {record.budgetLabelCode === 'BUD_002' && <div style={{color: '#FF0000'}}>{messages('request.key522')/*标签：超预算*/}</div>}
        {record.budgetLabelCode === 'BUD_003' && <div className='default-color-font'>{messages('request.key554')/*标签：预算预警*/}</div>}
      </div>
    ) : null;
  };

  handleRowClick = (record) => {
    this.goDetailExpense(record);
  };

  render() {
    const { field, columns, showExpenseFlag, nowExpense, isHidePaymentType } = this.state;
    const { info } = this.props;
    let data = JSON.parse(field.showValue || '{}').budgetDetail;
    return (
      <div className="request-budget-frame-table">
        {field.value && (
          <Table rowKey={(record, index) => index}
                 className="frame-table-border"
                 columns={columns}
                 dataSource={data}
                 expandedRowRender={record => this.expandedRowRender(record)}
                 rowClassName={record =>
                   (record.budgetLabelCode === 'BUD_002' || record.budgetLabelCode === 'BUD_003') ? '' : 'row-expand-display-none'}
                 pagination={false}
                 onRow={record => ({
                   onClick: () => this.handleRowClick(record)
                 })}
                 bordered
                 size="middle"/>
        )}
        <SlideFrame show={showExpenseFlag}
                    title={messages('request.key519')/*查看费用类型及金额*/}
                    content={ExpenseDetail}
                    params={{nowExpense, info, isHidePaymentType}}
                    onClose={() => this.setState({showExpenseFlag: false, nowExpense: null})}
                    width="800px"/>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

ExpenseTypeFrame.propTypes = {
  field: React.PropTypes.object,
  info: React.PropTypes.object
};

ExpenseTypeFrame.defaultProps = {
  field: {},
  info: {}
};

export default connect(mapStateToProps)(ExpenseTypeFrame)
